import './index.scss'
import MyDubber from '@/components/MyDubber'
import NetPage from '@/components/NetPage'
import { createContext, useContext, useEffect } from 'react'
import { useGetCVList } from '@/hook'

export let Context = createContext()

const Dubber = () => {
  let { cvlist, cvtree, setCvTree, updateCVList, loading } = useGetCVList()

  useEffect(() => {
    updateCVList()
  }, [])

  const updateData = async (newData, code) => {
    setCvTree({ ...newData })
    updateCVList(code)
  }

  return (
    <Context.Provider value={cvtree}>
      <div className="dubber">
        <div className="dubber-flex content-container">
          <div className="left">
            <MyDubber updateData={updateData} cvlist={cvlist} />
          </div>
          <div className="right small-screen">
            <NetPage loading={loading} />
          </div>
        </div>
      </div>
    </Context.Provider>
  )
}

export default Dubber
